// MyComponent.jsx
import { defineComponent, withModifiers } from "vue";
export default defineComponent({
  name: "MyComponent",
  props: {
    customClass: String,
    customStyle: Object,
    message: String,
  },
  setup(props, { slots }) {
    const handleClick = (event) => {
      event.stopPropagation();
      console.log("Button clicked");
    };
    const handleClickStop = withModifiers(() => {
      console.log("禁止冒泡");
    }, ["stop"]);
    return () => (
      <div class={props.customClass} style={props.customStyle}>
        <h1>{props.message}</h1>
        <div
          onClick={() => {
            console.log("out");
          }}
        >
        <button onClickOnce={handleClick}>Click Me</button>
        </div>
        <div
          onClick={() => {
            console.log("out");
          }}
        >
          <button onClick={handleClickStop}>Click Me Stop</button>
        </div>
        <div>{slots.default && slots.default()}</div>
        <div><span style={{fontWeight:600}}>bar：</span>{slots.bar()}</div>
        <div><span style={{fontWeight:600}}>footer：</span>{slots.footer({ text: props.message })}</div>
      </div>
    );
  },
});
